<template>
  <van-nav-bar title="首页" left-text="返回" left-arrow @click-left=" () => { $router.back('/home/index1'); } " fixed/>
    <br>
    <br>
  <!-- 搜索 -->
  <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />
  <!-- 数据 -->
  <van-grid>
    <van-grid-item text="活动" />
    <van-grid-item text="新品" />
    <van-grid-item text="客厅" />
    <van-grid-item text="厨房" />
  </van-grid>
  <!-- 渲染 -->
  <div>
    <dl v-for="item in xr" @click="goxq">
      <dt>
        <img :src="item.src" alt="" />
      </dt>
      <dd>
        <p>{{ item.t1 }}</p>
        <p>
            <span class="ys1">￥{{ item.t2 }}</span>  
            <span class="ys2">￥{{item.t3}}</span>
        </p>
      </dd>
    </dl>
  </div>
  <!-- 引入Tabbar -->
  <Tabbar></Tabbar>
</template>

<script setup>
import Tabbar from "@/components/Tabbar.vue";
import { ref } from 'vue'
// 跳转
import { useRouter } from 'vue-router'
let router = new useRouter()
let xr = ref([
    {src:'/src/img/1.png',t1:'华凌空调阿斯蒂芬更好水电费更',t2:'1799',t3:'2885'},
    {src:'/src/img/2.png',t1:'华凌空调阿斯蒂芬更好水电费更',t2:'1799',t3:'2885'},
    {src:'/src/img/3.png',t1:'华凌空调阿斯蒂芬更好水电费更',t2:'1799',t3:'2885'},
    {src:'/src/img/4.png',t1:'华凌空调阿斯蒂芬更好水电费更',t2:'1799',t3:'2885'},
    {src:'/src/img/1.png',t1:'华凌空调阿斯蒂芬更好水电费更',t2:'1799',t3:'2885'},
    {src:'/src/img/2.png',t1:'华凌空调阿斯蒂芬更好水电费更',t2:'1799',t3:'2885'},
    {src:'/src/img/3.png',t1:'华凌空调阿斯蒂芬更好水电费更',t2:'1799',t3:'2885'},
    {src:'/src/img/4.png',t1:'华凌空调阿斯蒂芬更好水电费更',t2:'1799',t3:'2885'},
])
// let goxq = ref('')
const goxq = () =>{
    router.push('/xq')
}
</script>

<style>
dl{
    width: 180px;
    float: left;
}
dl dt img{
    width: 160px;
    height: 160px;
    margin-left: 10px;
}
.ys1{
    color: orange;
    font-weight: bold;
    font-size: 20px;
}
.ys2{
    color: #ccc;
    font-size: 16px;
}
</style>